/// File: app/booking-detail.tsx
import { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, ScrollView, TextInput, KeyboardAvoidingView, Platform } from 'react-native';
import { useRouter } from 'expo-router';

export default function BookingDetail() {
  const router = useRouter();
  const [comment, setComment] = useState('');
  const [comments, setComments] = useState([
    { id: 1, user: '你', text: '期待這次諮詢！' },
    { id: 2, user: 'Kana Yuuki', text: '我也很期待，準備了春夏搭配建議 ☀️' },
  ]);

  const handleSend = () => {
    if (comment.trim()) {
      setComments(prev => [...prev, { id: Date.now(), user: '你', text: comment.trim() }]);
      setComment('');
    }
  };

  return (
    <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
      <ScrollView style={styles.container} contentContainerStyle={{ paddingBottom: 100 }}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
          <Text style={styles.backText}>← 返回</Text>
        </TouchableOpacity>

        <View style={styles.header}>
          <Image source={require('../../assets/logo.png')} style={styles.avatar} />
          <View>
            <Text style={styles.name}>Kana Yuuki</Text>
            <Text style={styles.tag}>@kana.style</Text>
            <Text style={styles.role}>風格顧問</Text>
          </View>
        </View>

        <View style={styles.card}>
          <Text style={styles.label}>預約服務</Text>
          <Text style={styles.content}>風格穿搭建議</Text>

          <Text style={styles.label}>預約時間</Text>
          <Text style={styles.content}>2025-04-25 ・ 15:00</Text>

          <Text style={styles.label}>備註</Text>
          <Text style={styles.content}>
            這次我們會針對春季穿搭重點進行搭配建議 ☀️
          </Text>
        </View>

        <TouchableOpacity style={styles.primaryBtn}>
          <Text style={styles.primaryText}>聯絡博主</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.secondaryBtn}>
          <Text style={styles.secondaryText}>取消預約</Text>
        </TouchableOpacity>

        <Text style={styles.commentTitle}>留言</Text>
        {comments.map(c => (
          <View key={c.id} style={styles.commentItem}>
            <Text style={styles.commentUser}>{c.user}</Text>
            <Text style={styles.commentText}>{c.text}</Text>
          </View>
        ))}
      </ScrollView>

      <View style={styles.commentBar}>
        <TextInput
          value={comment}
          onChangeText={setComment}
          placeholder="輸入留言..."
          style={styles.input}
          placeholderTextColor="#888"
        />
        <TouchableOpacity onPress={handleSend} style={styles.sendBtn}>
          <Text style={styles.sendText}>送出</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 60,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
  },
  backBtn: {
    marginBottom: 20,
  },
  backText: {
    fontSize: 14,
    color: '#555',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  avatar: {
    width: 64,
    height: 64,
    borderRadius: 32,
    marginRight: 16,
  },
  name: {
    fontSize: 18,
    fontWeight: '600',
    color: '#111',
  },
  tag: {
    fontSize: 13,
    color: '#888',
  },
  role: {
    fontSize: 13,
    color: '#555',
  },
  card: {
    backgroundColor: '#f9f9f9',
    borderRadius: 12,
    padding: 20,
    marginBottom: 30,
  },
  label: {
    fontSize: 13,
    color: '#888',
    marginBottom: 4,
  },
  content: {
    fontSize: 15,
    color: '#111',
    marginBottom: 16,
  },
  primaryBtn: {
    backgroundColor: '#111',
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center',
    marginBottom: 12,
  },
  primaryText: {
    color: '#fff',
    fontWeight: '600',
    fontSize: 15,
  },
  secondaryBtn: {
    borderColor: '#ccc',
    borderWidth: 1,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  secondaryText: {
    color: '#111',
    fontWeight: '500',
    fontSize: 14,
  },
  commentTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111',
    marginTop: 30,
    marginBottom: 12,
  },
  commentItem: {
    backgroundColor: '#f4f4f4',
    borderRadius: 8,
    padding: 10,
    marginBottom: 10,
  },
  commentUser: {
    fontWeight: '600',
    fontSize: 13,
    marginBottom: 4,
    color: '#111',
  },
  commentText: {
    fontSize: 14,
    color: '#333',
  },
  commentBar: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderTopColor: '#eee',
    borderTopWidth: 1,
    backgroundColor: '#fff',
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 20,
    paddingHorizontal: 14,
    paddingVertical: 8,
    fontSize: 14,
    color: '#111',
  },
  sendBtn: {
    marginLeft: 10,
    backgroundColor: '#111',
    borderRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  sendText: {
    color: '#fff',
    fontWeight: '600',
  },
});